<template>
  <div class="containerlist">
    <van-nav-bar title="客户名称" fixed @click-left="onClickLeft">
      <van-icon name="arrow-left" slot="left" color="#333" size="0.6rem" />
    </van-nav-bar>
    <van-search
      class="Searchell"
      v-model="value"
      show-action
      placeholder="请输入客户名称"
      @search="onSearch"
      @click="showSearch"
      @input="onSearch(value)"
    >
      <div slot="action" @click="onRemove"></div>
    </van-search>
    <div class="counts">
      <div class="counts_box">
        <div v-if="onshowflag">
          <div class="bn">
          <div class="bn_box" v-if="shuerArr.length == 0 && value!=''">
            <img src="@/assets/img/unnewuser.png" alt />
            <p>
              <span>未查到相关用户</span>
              <!-- <span
                @click="newUserOrder"
                style="color: #F18D00;border-bottom:1px solid #F18D00"
              >点此下单</span> -->
            </p>
          </div>
        </div>

        <div class="bn">
          <div class="bn_box" v-if="shuerArr.length == 0 && value ==''">
            <img src="@/assets/img/newuser.png" alt />
            <p>
              <span>请输入客户名称</span>
              <!-- <span>新用户</span>
              <span
                @click="newUserOrder"
                style="color: #F18D00;border-bottom:1px solid #F18D00"
              >点此下单</span> -->
            </p>
          </div>
        </div>
        <ul>
          <li
            v-for="(item, index) in shuerArr"
            :key="index"
            @click="warp(index)"
            :class="ind == index ? 'active' : ''"
          >{{item.kaUserName}} - {{item.employeeName}} - {{item.employeeTel}}</li>
        </ul>
        </div>
        <div class="bn">
          <div class="bn_box" v-if="blackuser">
            <img src="@/assets/img/blacklist.png" alt />
            <p>
              <span>该客户已被加入黑名单，不支持下单</span>
            </p>
          </div>
        </div>
      </div>
      <div class="btn">
        <van-button class="btnO" type="primary" @click="onConcal" size="large">取消</van-button>
        <van-button class="btnT" type="primary" size="large" @click="onOK" :disabled="disabled">继续</van-button>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '85%' }">
      <div class="titleBar">
        <div>
          <span class="titleBar-text">客户信息</span>
          <span class="Tost">详细信息可在后台管理完善</span>
        </div>
        <van-icon name="cross" @click="()=>this.show = false" />
      </div>
      <van-field
        v-model="orderUserName"
        required
        label="客户名称"
        placeholder="请输入"
        input-align="right"
      />
      <van-field
        v-model="orderPhone"
        required
        label="联系电话"
        type="number"
        maxlength="11"
        placeholder="请输入"
        input-align="right"
      />
      <div class="checkDiner">
        <p>客户类型</p>
        <ul>
          <li
            :class="checkArr.filter(item => item == '个人').length ? 'active' : ''"
            @click="onclick('个人')"
          >个人</li>
          <li
            :class="checkArr.filter(item => item == '商家').length? 'active' : ''"
            @click="onclick('商家')"
          >商家</li>
        </ul>
      </div>
      <van-field
        v-model="orderUpuser"
        required
        label="客户维护人"
        placeholder="请输入"
        input-align="right"
        @input="onshu"
      />
      <div class="titTost" v-if="flag && !flagT">
        <p>客户已被发展，请先联系组长或总监修改维护人后再下单！</p>
      </div>
      <div class="titTost" v-if="flag && flagT">
        <p>客户已存在可直接下单，若信息有误，可在后台客户管理修改！</p>
      </div>
      <div class="ulWaiter" v-if="trueFlag">
        <ul v-if="newArr.length">
          <li
            v-for="item in newArr"
            :key="item.waiterId"
            @click="onMouse(item)"
          >{{item.waiterName}} - {{item.mobile}}</li>
        </ul>
        <van-empty style="padding:0" description="暂无数据" image="search" v-if="newArr.length == 0 && value ==''" />
      </div>
      <div class="butons">
        <van-button
          class="btnT"
          type="primary"
          size="large"
          @click="onsub"
          :disabled="showflagTrue"
        >继续</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Button, Empty } from "vant";
import {
  newSearchKaUserLikeName,
  getUserByMobile,
  getWaiterInfoByName,
  addUserFromBdH5
} from "@/api/add";

Vue.use(Search);
Vue.use(Empty);
Vue.use(Button);
function debounce(fn, wait = 500) {
  // 防抖函数
  let timeout;
  return function(event) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.call(this, event);
    }, wait);
  };
}

export default {
  data() {
    return {
      value: "",
      shuerArr: [],
      disabled: true,
      ind: null,
      show: false,
      changeFlag: true,
      orderUserName: "",
      orderPhone: "",
      orderUpuser: "",
      checkArr: ["个人"],
      flag: false,
      flagT: false,
      newArr: [],
      waiterId: null,
      waiterIdSlider: null,
      trueFlag: false,
      showflagTrue: true,
      tagFlag: false,
      newflag: false,
      userId: null,
      flagXS: false,
      onshowflag: true,
      blackuser: false
    };
  },
  watch: {
    orderUserName(val) {
      this.onmoney();
    },
    orderPhone(val) {
      if (this.orderPhone.length == 11) {
        getUserByMobile(this.orderPhone).then(res => {
          if (res.data.length) {
            this.userId = res.data[0].userId;
            this.waiterIdSlider = res.data[0].waiterId;
            if (this.waiterId != "" && this.waiterId != null) {
              if (res.data[0].waiterId == this.waiterId) {
                this.flag = true;
                this.flagT = true;
                this.tagFlag = true;
                this.flagXS = true;
                this.onmoney();
              } else {
                this.flag = true;
                this.flagT = false;
                this.tagFlag = false;
                this.flagXS = false;
                this.onmoney();
              }
            } else {
              if (
                res.data[0].waiterId ==
                JSON.parse(localStorage.getItem("userInfo")).userId
              ) {
                this.flag = true;
                this.flagT = true;
                this.tagFlag = true;
                this.flagXS = true;
                this.onmoney();
              } else {
                this.flag = true;
                this.flagT = false;
                this.tagFlag = false;
                this.flagXS = false;
                this.onmoney();
              }
            }
            this.newflag = true;
          } else {
            this.flag = false;
            this.flagT = false;
            this.tagFlag = true;
            this.newflag = false;
            this.flagXS = false;
            this.onmoney();
          }
        });
      } else {
        this.onmoney();
      }
    }
  },
  created() {
    sessionStorage.clear();
    localStorage.setItem("kauserinfo", JSON.stringify({}));
    this.orderUpuser = `${
      JSON.parse(localStorage.getItem("userInfo")).userName
    } - ${JSON.parse(localStorage.getItem("userInfo")).userMobil}`;
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onConcal(){
      this.$router.back();
    },
    onSearch: debounce(function(e) {
      this.shuerArr = [];
      this.ind = null;
      this.disabled = true;
      this.onshowflag = true;
      newSearchKaUserLikeName({ kaUserLikeName: this.value }).then(res => {
        this.shuerArr = res.data;
      });
      this.blackuser = false;
    }),
    showSearch() {},
    onMouse(item) {
      this.orderUpuser = `${item.waiterName} - ${item.mobile}`;
      this.waiterId = item.waiterId;
      this.newArr = [];
      this.trueFlag = false;
      console.log(item)
      if (this.newflag) {
        if (this.waiterIdSlider == item.waiterId) {
          this.flag = true;
          this.flagT = true;
          this.tagFlag = true;
          this.flagXS = true;
        } else {
          this.flag = true;
          this.flagT = false;
          this.tagFlag = false;
          this.flagXS = false;
        }
      }
      this.onmoney();
    },
    newUserOrder() {
      this.show = true;
      this.orderUserName = "";
      this.orderPhone = "";
      this.waiterId = null;
      this.flag = false;
      this.flagT = false;
      this.tagFlag = false;
      this.orderUpuser = `${
        JSON.parse(localStorage.getItem("userInfo")).userName
      } - ${JSON.parse(localStorage.getItem("userInfo")).userMobil}`;
    },
    onmoney() {
      if (
        this.orderPhone.length == 11 &&
        this.orderUserName != "" &&
        this.tagFlag &&
        this.orderUpuser != "" &&
        this.orderUpuser != null
      ) {
        this.showflagTrue = false;
      } else {
        this.showflagTrue = true;
      }
    },
    onOK() {
      localStorage.setItem(
        "kauserinfo",
        JSON.stringify(this.shuerArr[this.ind])
      );
      this.$router.push({
        path: "/addList",
        query: {
          kauserId: this.shuerArr[this.ind].kaUserId,
          blackType: this.shuerArr[this.ind].blackType,
          invoiceConfigId: this.shuerArr[this.ind].invoiceConfigId,
          kaUserContractId: this.shuerArr[this.ind].kaUserContractId,
          kaUserContractStatus: this.shuerArr[this.ind].kaUserContractStatus,
          invoiceConfigId: this.shuerArr[this.ind].invoiceConfigId,
          companyCode: this.shuerArr[this.ind].companyCode
        }
      });
    },
    warp(ind) {
      this.ind = ind;
      this.onshowflag = false;
      console.log(this.shuerArr[ind])
      this.value = `${this.shuerArr[ind].kaUserName} - ${this.shuerArr[ind].employeeName} - ${this.shuerArr[ind].employeeTel}`;
      //校验客户是否为黑名单用户
      if(this.shuerArr[ind].blackType == 2){ // 人工拉黑
        this.blackuser = true;
      }
      if (this.ind != null && this.shuerArr[ind].blackType != 2) {
        this.disabled = false;
      }
    },
    onRemove() {
      this.value = "";
      this.shuerArr = [];
    },
    onclick(val) {
      this.checkArr = [val];
    },
    onshu: debounce(function() {
      getWaiterInfoByName(this.orderUpuser).then(res => {
        console.log(res);
        this.newArr = res.data;
        this.trueFlag = true;
        if (this.orderUpuser == "") {
          this.onmoney();
        }
      });
    }),
    onsub() {
      let Type = 1;
      if (this.flagXS) {
        this.$router.push({
          path: "/addList",
          query: {
            kauserId: this.userId
          }
        });
      } else {
        if (this.checkArr[0] == "个人") {
          Type = 1;
        } else if (this.checkArr[0] == "商家") {
          Type = 2;
        }
        addUserFromBdH5({
          customerMobile: this.orderPhone, // 客户手机号码
          customerName: this.orderUserName, // 客户名称
          userType: Type, // 客户用户类型
          waiterId:
            this.waiterId != null
              ? this.waiterId
              : JSON.parse(localStorage.getItem("userInfo")).userId // 客户维护人ID
        }).then(res => {
          console.log(res);
          this.$router.push({
            path: "/addList",
            query: {
              kauserId: res.data
            }
          });
        });
      }
    }
  }
};
</script>

<style lang="scss">
.containerlist {
  width: 100%;
  height: 100%;
  background: #fff;
}
.Searchell {
  width: 100%;
  position: fixed;
  top: 44px;
}
.van-empty__description {
  padding: 0;
}
.counts {
  width: 100%;
  background: #fff;
  position: fixed;
  top: 100px;
  .counts_box {
    height: 300px;
    overflow: scroll;
    ul {
      font-size: 15px;
      padding: 10px;
      box-sizing: border-box;
      li {
        padding: 10px 5px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }
    }
  }
  .btn {
    padding: 8px;
    box-sizing: border-box;
    display: flex;
    border-radius: 5px;
    justify-content: space-around;
    .btnO {
      background: #fff;
      width: 328px;
      height: 44px;
      border: 1px solid #f18d00;
      border-radius: 5px;
      color: #f18d00;
    }
    .btnT {
      background: #f18d00;
      width: 328px;
      height: 44px;
      margin-left: 10px;
      border: 1px solid #f18d00;
    }
  }
  .active {
    border: 0.5px solid #f18d00;
    color: #f18d00;
    background: #fffaf2;
  }
}
.addOrder {
  text-align: center;
  color: #f18d00;
  font-size: 14px;
  padding: 20px 0;
  box-sizing: border-box;
}
.butons {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  box-sizing: border-box;
  border-top: 1px solid #ebedf0;
  .btnT {
    background: #f18d00;
    width: 100%;
    height: 44px;
    border: 1px solid #f18d00;
  }
}
.titleBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f3f3f3;
  padding: 15px 16px;
  font-size: 16px;
  box-sizing: border-box;
  .Tost {
    font-size: 12px;
    margin-left: 11px;
  }
}
.checkDiner {
  font-size: 14px;
  background: #fff;
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  p::before {
    position: absolute;
    left: 0.21333rem;
    color: #ee0a24;
    font-size: 0.37333rem;
    content: "*";
  }
  ul {
    display: flex;
    li {
      border: 1px solid #f3f3f3;
      color: #666666;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      margin: 10px 0 0 10px;
      background: #f3f3f3;
      border-radius: 4px;
    }
    .active {
      border: 0.5px solid #f18d00;
      color: #f18d00;
      background: #fffaf2;
    }
  }
}
.titTost {
  padding: 15px;
  box-sizing: border-box;
  p {
    background: #ff6540;
    color: #fff;
    font-size: 12px;
    padding: 4px;
    text-align: center;
  }
}
.ulWaiter {
  width: 100%;
  height: 220px;
  overflow-y: scroll;
  background: #fff;
  ul {
    font-size: 14px;
    li {
      padding: 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #f3f3f3;
    }
  }
}
.bn{
  display: flex;
  justify-content: center;
}
.bn_box {
  text-align: center;
  p {
    font-size: 15px;
  }
  img {
    margin-top: 50px;
    width: 86px;
    height: 93px;
  }
}
</style>